<template>
	<view class="container">
		<u-tabs-swiper class="tabs-fixed" ref="uTabs" :list="tabsList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false" font-size="28" bar-height="6" bar-width="140" active-color="#6D4BBE"></u-tabs-swiper>
		<swiper class="tabs-swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item>
				<mescroll-uni ref="mescrollRef" top="80" height="100%" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="wd-flex card-list" v-for="(item,index) in cardList" :key="index">
						<image class="avatar" :src="item.course.image" mode="aspectFill"></image>
						<view class="wd-flex-cell">
							<view class="title">{{ item.course.name}}</view>
							<view>{{ item.shop.name }}</view>
							<view>每人每次扣1次</view>
							<view>{{ item.date_text }}</view>
						</view>
						<view class="state">{{ item.status_text }}</view>
					</view>
				</mescroll-uni>
			</swiper-item>
			<swiper-item>
				<scroll-view class="tabs-swiper__scroll" scroll-y="true">
					<u-form class="card-form" label-position="left" label-width="auto" :model="vipForm">
						<u-form-item label="卡名称" prop="name">
							<u-input type="text" :disabled="true" v-model="vipForm.vip.name"></u-input>
						</u-form-item>
						<u-form-item label="卡范围" prop="type">
							<u-input type="text" :disabled="true" v-model="vipForm.vip.range_type"></u-input>
						</u-form-item>
						<u-form-item label="卡号" prop="number">
							<u-input type="text" :disabled="true" v-model="vipForm.card_no"></u-input>
						</u-form-item>
						<u-form-item label="发卡场馆" prop="hairpinVenue">
							<u-input type="text" :disabled="true" v-model="vipForm.shop.name"></u-input>
						</u-form-item>
						<u-form-item label="发卡日期" prop="hairpinDate">
							<u-input type="text" :disabled="true" v-model="vipForm.createtime_text"></u-input>
						</u-form-item>
						<u-form-item label="开卡日期" prop="openDate">
							<u-input type="text" :disabled="true" v-model="vipForm.activation_time_text"></u-input>
						</u-form-item>
						<u-form-item label="卡类型" prop="type">
							<u-input type="text" :disabled="true" v-model="vipForm.type_text"></u-input>
						</u-form-item>
						<u-form-item label="余额" prop="validDate" v-if="vipForm.type==2">
							<u-input type="text" :disabled="true" v-model="vipForm.value"></u-input>
						</u-form-item>
						<u-form-item label="有效期至" prop="validDate">
							<u-input type="text" :disabled="true" v-model="vipForm.expire_in_text"></u-input>
						</u-form-item>
						
					</u-form>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view class="tabs-swiper__scroll" scroll-y="true">
					<view class="card-wrapper">
						<view class="member-card">
							<view class="member-card__state" v-if="memberCard.expire_status==0">已过期</view>
							<view class="member-card__head" :style="{background: memberCard.background}">
								<view class="name">{{ memberCard.vip.name }}</view>
								<view class="nums">{{ memberCard.vip.card_value }}</view>
								<image class="icon" src="../../../static/icons/icon_vipcard-backdrop.png" mode="aspectFit"></image>
							</view>
							<view class="member-card__body">
								<view class="title">{{ memberCard.vip.name }}</view>
								<view>{{ memberCard.type_text }}</view>
								<view v-if="memberCard.type==2">{{ memberCard.value }}次</view>
								<view>有效期至：{{ memberCard.expire_in_text }}</view>
							</view>
						</view>
						<view class="card-title">操作</view>
						<view class="card-gird">
							<view class="card-gird__item" @click="card_edit">
								<image class="icon" src="../../../static/icons/icon_member-gird1.png" mode="aspectFit"></image>
								<text>编辑</text>
							</view>
							<view class="card-gird__item" @click="tingka">
								<image class="icon" src="../../../static/icons/icon_member-gird6.png" mode="aspectFit"></image>
								<text>停卡</text>
							</view>
							<view class="card-gird__item" @click="tingka_cancel">
								<image class="icon" src="../../../static/icons/icon_member-gird7.png" mode="aspectFit"></image>
								<text>解除停卡</text>
							</view>
							<!-- <view class="card-gird__item" @click="gocard">
								<image class="icon" src="../../../static/icons/icon_member-gird8.png" mode="aspectFit"></image>
								<text>续卡</text>
							</view> -->
							<view class="card-gird__item" @click="card_del">
								<image class="icon" src="../../../static/icons/icon_member-gird10.png" mode="aspectFit"></image>
								<text>删除</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		data() {
			return {
				user_card_id:0,
				height: "400px", // 需要固定swiper的高度
				tabsList: [
					{ id: 0, name: '上课记录' },
					{ id: 1, name: '详细资料' },
					{ id: 2, name: '卡片操作' },
				],
				tabsCurrent: 0,
				swiperCurrent: 0,
				
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '暂无内容哦'
					}
				},
				cardList: [
					// {
					// 	avatar: '../../../static/images/img_product_swiper.png',
					// 	title: '瑜伽·流动伸展',
					// 	info: '山水人家美林泉',
					// 	rule: '每人每次扣减1次',
					// 	time: '2020-11-14 10:30',
					// 	state: '未签到',
					// }
				],
				vipForm: {
					// name: '瑜伽·课程30次卡',
					// type: '次数卡',
					// number: '20211112001',
					// hairpinVenue: '山水人家美林泉',
					// hairpinDate: '2021-11-12',
					// openDate: '2021-11-20',
					// validDate: '2022-11-20',
					// amount: '1980元',
					// balance: '5次',
					// applyVenue: '山水人家美林泉',
					// presenter: '推荐',
					// remarks: '备注备注备注',
				},
				memberCard: {
					background: 'linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%)',
					name: '私教卡',
					nums: '10次',
					title: '20211112001',
					info: '上门私教·10次卡',
					balance: '5次',
					term: '2021-12-31',
					status: 1
				},
			}
		},
		onLoad(options) {
			// 需要固定swiper的高度
			this.height = (uni.getSystemInfoSync().windowHeight - 40) + 'px';
			this.user_card_id = options.user_vip_id || 0;
			this.FetchCardDetail();
		},
		methods: {
			
			FetchCardDetail(){
				var that = this;
				var user_vip_id = that.user_card_id;
				if(!user_vip_id){
					uni.showToast({title:'会员参数信息错误',icon:'none'});
					return false;
				}
				that.$core.get({url:'fitness.manage/vip_info',data:{user_vip_id: user_vip_id},success:(ret)=>{
					that.vipForm = ret.data;
					that.memberCard = ret.data;
				}});
			},
			//编辑
			card_edit(){
				uni.navigateTo({
					url: '/pages/manage/memberTools/info?user_card_id='+this.user_card_id
				})
			},
			
			//停卡
			tingka(){
				var user_vip_id = this.user_card_id;
				uni.navigateTo({
					url: '/pages/manage/memberTools/stop?user_card_id='+user_vip_id
				})
			},
			//解除停卡
			tingka_cancel(){
				var user_card_id = this.user_card_id;
				uni.navigateTo({
					url: '/pages/manage/memberTools/stopCancel?user_card_id='+user_card_id
				})
			},
			
			//删除
			card_del(){
				var that = this;
				var user_card_id = that.user_card_id;
				uni.showModal({
					title: '提示',
					    content: '确定删除',
					    success: function (res) {
					        if (res.confirm) {
								that.$core.get({url:'fitness.manage/del_user_vip',data:{user_vip_id: user_card_id},success:(ret)=>{
									uni.showToast({
										title:'删除成功',
										icon: 'none',
										success() {
											setTimeout(function(){
												uni.navigateBack()
											},1500)
										}
									})
								}});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
				})
				
			},
			
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.tabsCurrent = current;
			},
			/*下拉刷新的回调 */
			downCallback() {
				var that = this;
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				setTimeout(function(){
					that.mescroll.resetUpScroll()
				},300)
				
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				var that = this;
				var user_vip_id = that.user_card_id;
				that.$core.get({url:'fitness.manage/vip_course',data:{user_vip_id: user_vip_id},success:(ret)=>{
					if(page.num == 1) that.cardList = []; //如果是第一页需手动制空列表
					that.cardList = that.cardList.concat(ret.data.data); //追加新数据
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					that.mescroll.endSuccess(ret.data.data.length);
				}});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.tabs-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		/deep/ .u-tabs {
			border-radius: 0 0 24rpx 24rpx;
		}
	}
	.tabs-swiper {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		swiper-item {
			height: 100%;
		}
		&__scroll {
			height: 100%;
			padding: 1rpx 0;
			padding-top: 80rpx;
			box-sizing: border-box;
		}
	}
	.card-list {
		margin: 24rpx;
		padding: 24rpx 35rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		line-height: 38rpx;
		font-size: 24rpx;
		color: #666666;
		.avatar {
			display: block;
			margin-right: 40rpx;
			width: 124rpx;
			height: 124rpx;
			border-radius: 50%;
		}
		.title {
			line-height: 42rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
		.state {
			margin-left: 30rpx;
		}
	}
	.card-form {
		display: block;
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		/deep/ .u-form-item {
			padding: 10rpx 30rpx;
			font-size: 26rpx;
		}
		/deep/ .u-input__input {
			text-align: right;
			font-size: 26rpx;
			color: #999999;
		}
		/deep/ .u-input__textarea {
			min-height: auto;
			padding: 15rpx 0;
			line-height: 40rpx;
			box-sizing: border-box;
		}
	}
	.card-wrapper {
		display: block;
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		.member-card {
			margin: 0;
		}
	}
	
	.member-card {
		position: relative;
		display: flex;
		align-items: center;
		margin: 24rpx;
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		&__state {
			position: absolute;
			top: 0;
			right: 0;
			padding: 0 28rpx;
			background: #E6E6E6;
			line-height: 48rpx;
			font-size: 22rpx;
			color: #666666;
			border-radius: 0 0 0 24rpx;
		}
		&__head {
			position: relative;
			width: 205rpx;
			height: 132rpx;
			background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
			border-radius: 12rpx;
			.name {
				position: absolute;
				top: 18rpx;
				left: 14rpx;
				right: 14rpx;
				line-height: 38rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			.nums {
				position: absolute;
				bottom: 18rpx;
				left: 14rpx;
				right: 14rpx;
				line-height: 25rpx;
				font-size: 18rpx;
				color: #FFFFFF;
			}
			.icon {
				position: absolute;
				bottom: 0;
				right: 0;
				display: block;
				width: 106rpx;
				height: 101rpx;
			}
		}
		&__body {
			flex: 1;
			padding: 0 22rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #666666;
			overflow: hidden;
			.title {
				line-height: 45rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}
	.card-title {
		margin: 0 32rpx;
		border-top: 1rpx #EDEDED solid;
		padding: 25rpx 0;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.card-gird {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 25rpx;
		&__item {
			width: calc(100%/4);
			padding: 25rpx 10rpx;
			.icon {
				display: block;
				margin: 0 auto;
				width: 56rpx;
				height: 56rpx;
			}
			text {
				display: block;
				margin-top: 8rpx;
				text-align: center;
				line-height: 38rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}
</style>